<template>
	<view class="fixAuto bb middle">
		<view :style="{width : titleWidth + 'rpx'}" v-if="title">
			{{title}}
		</view>
		<view class="father ptb5">

			<view class="flex" :class="{ 'rt grey' : !valueSync}">
				{{_place}}
				<view class="sIcon-arrowRight grey ml"></view>
			</view>

			<picker class="abs op0" :mode="mode" :value="value" @change="_changeValue">
				<view class="abs op0">请选择</view>
			</picker>

		</view>
	</view>
</template>

<script>
	export default {
		name: "pickerDates",
		// #ifdef MP-WEIXIN
		behaviors: ['wx://form-field'],
		// #endif
		props: {
			mode: {
				type: String,
				default: "date"
			},
			title: String,
			disabled: Boolean,
			name: String,
			value: {
				type: String,
				default: ""
			},
			placeholder: String,
			titleWidth: {
				type: [String, Number],
				default: 200
			}
		},
		data() {
			return {
				valueSync: ''
			};
		},
		watch: {
			value: {
				handler() {
					this.valueSync = this.value || '';
				},
				immediate: true
			}
		},
		computed: {
			_place() {
				return this.valueSync ? this.valueSync : '请选择';
			}
		},
		methods: {
			_changeValue(e) {
				console.log("e.detail.value: ",e.detail.value);
				this.valueSync = e.detail.value;
				this.$emit("input", this.valueSync);
			}
		}
	}
</script>
